<template>
    <view
        v-if="visible"
        @click="handlebacktop"
        class="back-top"
        :style="{ right: right + 'rpx', bottom: bottom + 'rpx', 'background-color': bgColor }">
        <u-icon v-if="type === 'default'" name="arrow-up" :size="28" :color="iconColor"></u-icon>
        <slot v-else></slot>
    </view>
</template>

<script setup>
export default {
    props: {
        // 类型：default（默认）|| custom（自定义）
        type: {
            type: String,
            default: 'default'
        },
        // 容器: page / scroll-view
        container: {
            type: String,
            default: 'page'
        },
        // 距离顶部出现高度
        visibleHeight: {
            type: Number,
            default: 300
        },
        // 距离右侧位置
        right: {
            type: Number,
            default: 36
        },
        // 距离底部位置
        bottom: {
            type: Number,
            default: 140
        },
        // 图标颜色
        iconColor: {
            type: String,
            default: '#fff'
        },
        // 背景颜色
        bgColor: {
            type: String,
            default: '#0069FF'
        }
    },
    /**
     * 组件的初始数据
     */
    data() {
        return {
            visible: false
        };
    },
    created() {
        // 页面自动挂载backtop组件实例
        const pages = getCurrentPages();
        const pageContext = pages[pages.length - 1];
        pageContext.backtopComp = this;
    },

    /**
     * 组件的方法列表
     */
    methods: {
        /**
         * 设置滚动高度
         * @param {number} scrollTop 滚动距离
         */
        setScrollTop(scrollTop = 0) {
            // 显示返回按钮
            if (scrollTop > this.visibleHeight) {
                this.visible = true;
            }
            // 隐藏返回按钮
            if (scrollTop < this.visibleHeight) {
                this.visible = false;
            }
        },
        /**
         * 回到顶部
         */
        handlebacktop() {
            if (this.container === 'page') {
                // 返回页面顶部
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 300
                });
            } else {
                // 返回scroll-view顶部
                this.$emit('backtop', { scrollTop: 0 });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.back-top {
    position: fixed;
    right: 36rpx;
    bottom: 140rpx;
    z-index: 1000;
    width: 98rpx;
    height: 98rpx;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #0069ff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
</style>
